<template>
	<view>
		<view @touchmove.prevent.stop class="shade" v-if="is_admin == 0">
			<view class="apply_title">抱歉！您不是超级管理员，无法浏览当前页面</view>
		</view>
		
		<view style="padding: 30rpx;">
			<view class="title-text" style="line-height: 50rpx;">活动名称：<text style="color: #000;">{{name}}</text></view>
			<view class="title-text">活动内容：<text style="color: #000;">{{content}}</text></view>
			<view class="mt-1">
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<text class="title-text">报名是否需要支付</text>
					<switch @change="switchChange" :checked="huodong.need_pay == 1 ? true : false" style="transform:scale(0.7)" color="#475dfc"></switch>
				</view>
				<view v-if="huodong.need_pay == 1" class="mt-1" style="display: flex; align-items: center;">
					<text class="title-text" style="width: 30%;">支付金额：</text>
					<input type="number" v-model="huodong.pay_price" :placeholder="!huodong.pay_price ? '请输入需支付的金额' : huodong.pay_price" class="item-input" style="width: 70%;" />
				</view>
			</view>
			<view style="display: flex; align-items: center; margin-top: 20rpx;">
				<text class="title-text" style=" width: 30%;">活动海报ID：</text>
				<input type="number" v-model="huodong.haibao_id" :placeholder="!huodong.haibao_id ? '请输入活动海报ID' : JSON.stringify(huodong.haibao_id)" class="item-input" style="width: 70%;" />
			</view>
			<view class="item-box">
				<text class="title-text">未授权时按钮提示文字：</text>
				<input class="item-input" v-model="huodong.before_authorize_btn" :placeholder="!huodong.before_authorize_btn ? '请输入未授权时按钮提示文字' : huodong.before_authorize_btn" />
			</view>
			<view class="item-box">
				<text class="title-text">授权后按钮提示文字：</text>
				<input class="item-input" v-model="huodong.after_authorize_btn" :placeholder="!huodong.after_authorize_btn ? '请输入授权后按钮提示文字' : huodong.after_authorize_btn" />
			</view>
			<view class="editor-box">
				<text class="title-text">报名成功后提示文字：</text>
				<wl-editor @getText="getText" :html="huodong.enter_success_tip" style="background-color: #fff;"></wl-editor>
			</view>
			<view @tap="confrim" class="confrim">提交</view>
			<view @tap="back" class="close">返回上一页</view>
		</view>
	</view>
</template>

<script>
	import WlEditor from '../../components/editor/editor.vue';
	import u from '../../utils/common.js'
	export default {
		components: {
			'wl-editor': WlEditor
		},
		data() {
			return {
				activity_id: 0,
				huodong: {
					id: 0,
					need_pay: 0,
					pay_price: '',
					haibao_id: '',
					before_authorize_btn: '',
					after_authorize_btn: '',
					enter_success_tip: '',
				},
				is_admin: 1,
				name: '',
				content: '',
			};
		},
		onLoad(e) {
			this.$comm.appLogin(user_info=>{
				this.activity_id = e.activity_id
				this.get_activity_info()
			})
		},
		methods: {
			confrim() {
				let data = this.huodong
				data.haibao_id = parseInt(data.haibao_id)
				if (data.need_pay == 1) {
					if (data.pay_price == '') {
						this.showToast('支付金额不能为空', 'none', 2000)
						return
					} else if (data.pay_price < '0.01') {
						this.showToast('支付金额不能少于0.01', 'none', 2000)
						return
					}
				}
				if (data.haibao_id == 0) {
					this.showToast('海报ID不能为空', 'none', 2000)
					return
				}
				if (data.before_authorize_btn == '') {
					this.showToast('报名前按钮提示文字不能为空', 'none', 2000)
					return
				}
				if (data.after_authorize_btn == '') {
					this.showToast('报名后按钮提示文字不能为空', 'none', 2000)
					return
				}
				/* if (data.enter_success_tip == '<p><br></p>') {
					this.showToast('报名成功后提示文字不能为空', 'none', 2000)
					return
				} */
				// console.log(this.huodong, typeof(this.huodong.pay_price), 'confrim')
				this.$comm.request({
					url: 'api/admin_activity_update',
					method: 'POST',
					data: this.huodong,
					success: (res) => {
						console.log(res, 'api/admin_activity_update')
						if (res.data.code != 200) {
							this.showToast(res.data.msg, 'none', 2000)
							return
						}
						uni.redirectTo({
							url: 'activitylist'
						})
					}
				})
			},
			
			get_activity_info() {
				this.$comm.request({
					url: 'api/admin_activity_detail',
					method: 'GET',
					data: {
						id: this.activity_id
					},
					success: (res) => {
						if (res.data.code == 202) {
							this.is_admin = 0
							return
						}
						let data = res.data.result
						this.content = data.content
						this.name = data.title
						let huodong = this.huodong
						huodong.need_pay = data.need_pay
						huodong.pay_price = data.pay_price
						huodong.haibao_id = JSON.stringify(data.haibao_id)
						huodong.before_authorize_btn = data.before_authorize_btn
						huodong.after_authorize_btn = data.after_authorize_btn
						huodong.enter_success_tip = data.enter_success_tip
						huodong.id = data.id
						console.log(res, this.huodong, 'get_activity_info')
					}
				})
			},
			
			switchChange: function (e) {
				if (e.detail.value == false) {
					this.huodong.need_pay = 0
					this.huodong.pay_price = '0.001'
					return
				}
				this.huodong.need_pay = 1
			},
			
			getText(data) {
				this.huodong.enter_success_tip = data;
				// console.log(this.huodong.enter_success_tip, 'getText')
			},
			
			back() {
				uni.redirectTo({
					url: 'activitylist'
				})
			},
			
			showToast(msg, icon, time) {
				uni.showToast({
					title: msg,
					icon: `${icon}`,
					duration: time,
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
		font-size: 30rpx;
	}
	
	.shade {
		position: fixed;
		height: 100vh;
		z-index: 1000;
		background-color: rgba(0, 0, 0, .6);
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	
		.apply_title {
			color: #ffffff;
			font-size: 35rpx;
			margin-bottom: 20rpx;
		}
	}
	
	.item-box {
		margin-top: 20rpx;
	}
	
	.title-text {
		color: #888;
	}
	
	.item-input {
		background-color: #fff; border-radius: 10rpx; height: 50rpx; padding: 10rpx 20rpx; line-height: 50rpx;
	}
	
	.editor-box {
		width: 690rpx; margin: 0 auto; border-radius: 10rpx; margin-top: 20rpx;
	}
	
	.confrim {
		background-color: #475dfc; line-height: 80rpx; margin-top: 30rpx; color: #fff; text-align: center; border-radius: 1000rpx; font-size: 34rpx;
	}
	
	.close {
		line-height: 80rpx; margin-top: 30rpx; text-align: center; border-radius: 1000rpx; font-size: 34rpx; border: 1px solid #999;
	}
</style>
